<template>
  <div>
    <van-nav-bar title="线上训练" fixed left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight" >
      <van-icon size="20px" :name="fav" slot="right"/>
    </van-nav-bar>
    <div class="content">
      <DetailCard :data="detail"></DetailCard>
      <div class="info">
        <p>{{detail.train_name}}</p>
        <p>推荐场景: {{detail.scene_name}}</p>
        <p>锻炼部位: {{detail.body_name}}</p>
        <p>
          难度:
          <van-rate v-model="detail.degree" :count="10"/>
        </p>
        <p>练习人数: {{detail.hits}}</p>
        <p>更新时间: {{detail.update_time}}</p>
      </div>
      <div class="video">
        <div v-for="item in video" :key="item.id">
          <p>{{ item.tvideo_name }}</p>
          <van-image fit="cover" :src="'/uploads'+item.thumb"></van-image>
          <video controls width="100%" :src="'/uploads/tvideo/video/'+item.url"></video>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DetailCard from '@/components/DetailCard.vue'
export default {
  name: 'trainingdetail',
  methods: {
    onClickLeft () {
      this.$root.$router.go(-1)
    },
    onClickRight () {
      if (this.fav === 'like-o') {
        // console.log('session :', sessionStorage.sessionid)
        // console.log('sessionuser :', sessionStorage.userid)
        this.$axios
          .get('/api/create', {
            params: {
              SessionID: sessionStorage.sessionid,
              mod: 'trainfavor',
              train_id: this.detail.id,
              user_id: sessionStorage.sessionid
            }
          })
          .then(result => {
            this.fav = 'like'
            console.log('result :', result)
          })
          .catch(err => {
            console.log('err :', err)
          })
      } else {
        this.$axios
          .get('/api/delete', {
            params: {
              SessionID: sessionStorage.sessionid,
              mod: 'trainfavor',
              train_id: this.detail.id,
              user_id: sessionStorage.sessionid
            }
          })
          .then(result => {
            console.log('result :', result)
            this.fav = 'like-o'
          })
          .catch(err => {
            console.log('err :', err)
          })
      }
    }
  },
  components: {
    DetailCard
  },
  data () {
    return {
      detail: {},
      video: [],
      fav: 'like-o'
    }
  },
  mounted () {
    // console.log('this.$route :', this.$route.query.id)
    this.$axios
      .get('/api/get', {
        params: {
          mod: 'training',
          id: this.$route.query.id
        }
      })
      .then(response => {
        // console.log('result :', response.data.thumb)
        this.detail = response.data
        this.detail.degree = parseInt(this.detail.degree)
      })
      .catch(err => {
        console.log('err :', err)
      })
    this.$axios
      .get('/api/get', {
        params: {
          mod: 'training',
          related: '1',
          id: this.$route.query.id,
          map: 'tvideo'
        }
      })
      .then(response => {
        // console.log('response.tvideo :', response.data.tvideo);
        this.video = response.data.tvideo
      })
      .catch(err => {
        console.log('err :', err)
      })
  }
}
</script>

<style scoped>
.van-nav-bar {
  border-bottom: 1px solid #ddd;
}
.content {
  margin-top: 47px;
  padding: 1rem;
}
/* .video {
} */
.video > div {
  border-top: 1px solid black;
  margin: 0.5rem;
}
.video > div > p {
  font-size: 1.2rem;
  font-weight: 600;
}
.van-image {
  width: 100%;
  height: 15rem;
}
/* video {
} */
/* .info {
} */
.info > p {
  margin-left: 0.5rem;
}
.info > p:first-of-type {
  font-weight: 600;
  font-size: 1.5rem;
}
</style>
